from dash import html, dcc
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
import numpy as np

from modules.bigscreen.callback2 import register_callbacks as register_equipment_callbacks
from server import server
from modules.bigscreen.charts import *
# from modules.bigscreen.charts import create_org_equipment_amount_chart


from .charts import *
# from .charts2 import *
from .charts3 import *
from .panelparts import *



# 创建左侧面板
def create_left_panel():
    running_status_list = get_org_running_status_list()
    return html.Div([
        create_org_equipment_amount_panel(),
        create_donut_panel(),
        create_availability_panel()
    ], style={
        "width": "30%",
        "height": "calc(100vh - 90px)",
        "backgroundColor": "#112360",
        "display": "flex",
        "flexDirection": "column",
        "minWidth": "0",
        "minHeight": "0",
        "padding": "5px 0 0 0", # 移除水平内边距
        "margin": "0 0 0 0"
    })


# 创建中间地图面板
def create_middle_panel():
    # print("middle PANEL RENDERED")
    return html.Div([
        html.Div([  # 新的父Div，用于容纳标题和下拉框，实现同行显示
            html.Span(
                "一级医院：11家",
                id="title-org-count",
                n_clicks=0,
                style={
                    "cursor": "pointer",
                    "color": "#fff",
                    "fontSize": "16px",
                    "fontWeight": "bold",
                    "marginLeft": "10px" ,
                    "marginRight": "160px"  # 在标题和下拉框之间添加一些间距
                }
            ),
            html.Div([  # 包裹两个下拉框的Div
                dcc.Dropdown(
                    id='filter-equipment-category',
                    options=[{'label': '全部分类', 'value': None}],  # 由回调动态填充
                    placeholder='设备分类',
                    style={'width': '150px', 'display': 'inline-block', 'marginRight': '10px'}
                ),
               
                dcc.Dropdown(
                    id='filter-price-range',
                    options=[
                        {'label': '全部区间', 'value': None},
                        {'label': '0-1万', 'value': '0-1万'},       # 修改 value
                        {'label': '1-5万', 'value': '1-5万'},       # 修改 value
                        {'label': '5-10万', 'value': '5-10万'},     # 修改 value
                        {'label': '10-50万', 'value': '10-50万'},   # 修改 value
                        {'label': '50-100万', 'value': '50-100万'}, # 修改 value
                        {'label': '100万以上', 'value': '100万以上'} # 修改 value
                    ],
                    placeholder='价格区间',
                    style={'width': '150px', 'display': 'inline-block'}
                )
            ])
        ], style={
            'display': 'flex',  # 使用flex布局
            'alignItems': 'center',  # 垂直居中对齐
            'padding': '5px 5px',  # 为该行添加一些内边距
            'zIndex': 10 # 确保下拉框在地图元素之上
            # 移除了原标题Div的 className="panel-title" 和其特定style，因为布局已改变
        }),
        
        html.Div([
            # 添加地图切换控件
            # html.Div([
            #     dcc.RadioItems(
            #         id='map-type-selector',
            #         options=[
            #             {'label': '静态地图', 'value': 'static'},
            #             {'label': '交互地图', 'value': 'interactive'}
            #         ],
            #         value='static',  # 默认选择静态地图
            #         labelStyle={'display': 'inline-block', 'marginRight': '10px', 'color': 'white', 'fontSize': '12px'},
            #         style={'textAlign': 'center', 'marginBottom': '3px', 'marginTop': '5px'}
            #     ),
            # ]),
            
            

            # 静态地图 - 默认显示
            html.Div([
                # 使用相对定位的容器
                html.Div([
                    # 底层地图图片
                    html.Img(
                        id='map-background',
                        src='/static/map/wt1.png',  # 替换为实际背景图路径
                        style={
                            "width": "200%",
                            "height": "200%",
                            "objectFit": "contain",
                            "position": "absolute",
                            "top": "0",
                            "left": "0",
                            "zIndex": -1  # 确保背景图在地图下方
                        }
                    ),
                    html.Img(
                        id='map-image',
                        src='/static/map/maphuangpu.png',
                        
                        style={
                                "width": "100%",  # 使用100%宽度
                                "height": "100%", # 使用100%高度
                                "objectFit": "contain",
                                "position": "absolute",
                                "top": "0",
                                "left": "0",
                                "opacity": "0.9"  # 新增透明度设置
                        }
                    ),
                    
                    # 添加SVG覆盖层，用于放置医院信息圆圈
                    html.Div(
                        id='map-overlay',
                        style={
                            "position": "absolute", 
                            "top": 0, 
                            "left": 0, 
                            "width": "100%", 
                            "height": "100%", 
                            "pointerEvents": "auto"  # 允许点击事件传递到圆圈
                        },
                        # 这里将通过回调函数动态生成医院信息圆圈
                    )
                ], style={"position": "relative", 
                    "width": "95%", 
                    "height": "calc(100vh - 70px)", 
                    "background": "#112360",
                    "margin": "0 auto",  # 居中
                    "overflow": "hidden"  # 防止内容溢出
                    }
                )
            ], id='static-map-container', style={"textAlign": "center", "height": "calc(100vh - 70px)"}),
            
            # # 交互地图 - 初始隐藏
            # html.Div([
            #     # 百度地图iframe
            #     html.Iframe(
            #         src="https://map.baidu.com/search/%E4%B8%8A%E6%B5%B7%E5%B8%82/@13523265.74,3641163.57,12z?querytype=s&da_src=shareurl&wd=%E4%B8%8A%E6%B5%B7%E5%B8%82&c=289&src=0&pn=0&sug=0&l=13&b=(13511991.62,3631165.11;13534539.86,3651161.91)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&device_ratio=2",
            #         style={"width": "95%", "height": "calc(100vh - 70px)", "border": "none"}
            #     )
            # ], id='interactive-map-container', style={'display': 'none', "textAlign": "center"}),

        ], className="panel-content", style={"padding": "0", "height": "100%"})
    ], className="dashboard-panel", style={
        "width": "39.5%", # 将宽度从 40% 减小到 39.5%
        "height": "calc(100vh - 90px)",
        "background": "#112360",
        "display": "flex",
        "flexDirection": "column",
        "minWidth": "0",
        "minHeight": "0",
        "padding": "0 0 0 0",
        "margin": "0 0 0 0"
    })

# 创建右侧面板：
def create_right_panel():
    return html.Div([
        create_repair_count_panel(),
        create_maintain_count_panel(),
        create_inspection_count_panel(),
    ], style={
        "width": "30%",
        "height": "calc(100vh - 90px)",
        "background": "#112360",
        "display": "flex",
        "flexDirection": "column",
        "minWidth": "0",
        "minHeight": "0",
        "padding": "5px 0 0 0", # 移除水平内边距
        "margin": "0 0 0 0"
    })

big_modal = dbc.Modal(
    [
        # 右上角关闭按钮
        html.Button(
            "关闭",
            id="close-big-modal",
            n_clicks=0,
            style={
                "position": "absolute",
                "top": "18px",
                "right": "38px",
                "fontSize": "32px",
                "background": "none",
                "border": "none",
                "color": "#fff",
                "cursor": "pointer",
                "zIndex": 10001
            }
        ),
        dbc.ModalBody(
            dcc.Graph(
                id='big-modal-graph',
                figure=None,
                style={
                    'width': '1400px',  
                    'height': '800px',
                    'margin': '100px'
                },
                config={'responsive': True, 'displayModeBar': False}
            ),
            style={
                "height": "100%",
                "width": "100%",
                "borderRadius": "15px",
                "overflow": "hidden",
                "display": "flex",
                "flexDirection": "column",
                "justifyContent": "flex-start",
                "alignItems": "center",
                "padding": "10",
                "margin": "10"
            }
        ),
    ],
    id='big-graph-modal',
    is_open=False,
    backdrop=True,
    centered=False,
    size="xl",
    style={
        "borderRadius": "16px",
        "height": "calc(100vh - 350px)",
        "width": "calc(100vw - 400px)",
        "height": "100%",
        "width": "100%",
        "boxShadow": "0 8px 32px 0 rgba(10,39,64,0.35)",
        "background": "#001f36",
        "position": "absolute",
        "margin": "150"
    }
)



# 大屏布局
layout = html.Div([

    dcc.Interval(
        id='interval-component',
        interval=3600000,  # 每小时更新一次,
        n_intervals=0
    ),
    dcc.Store(id='dummy-redirect-output'),

    big_modal,
    create_donut_big_modal(),
   
    dcc.Location(id="bigscreen-redirector", refresh=True),
    html.Div([
        create_left_panel(),
        create_middle_panel(),
        create_right_panel(),
    ], style={
        "display": "flex",
        "flexDirection": "row",
        "height": "100vh",
        "width": "100vw",
        "overflow": "auto", # 可以保留，但如果总宽度小于100vw，应该不会出现滚动条
        "margin": "0", # 移除负边距
        "backgroundColor": "#112360",
        "padding": "0"
    })
], style={
    "backgroundColor": "#112360",
    "height": "100vh",
    "width": "100vw",
    "margin": "0",
    "padding": "0",
    "overflow": "auto" # 这个是整个页面的滚动条，可以保留
})


